<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
			.banner{
				width: 450px;
				height: 270px;
				overflow: hidden;
				position: relative;
				
			}
			#u1{
				width: 3150px;
				list-style: none;
			}
			#u1 li{
				float: left;
			}
			.page{
				position: absolute;
				bottom: 20px;
				left: 200px;
			}
			
			.page span{
				width: 20px;
				height: 20px;
				background: #3e3e3e;
				display: inline-block;
				color: #fff;
				font-size: 9px;
				line-height: 20px;
				text-align: center;
				margin: 0 5px 0 0;
				
				
			}
			.page span.active{
				background: #b61b1f;
			}

		</style>
	</head>
	<body>
		<div class="banner">
			<ul id="u1">
				<li><a href="#"><img src="img/1467848124908093720.jpg"/></a></li>
				<li><a href="#"><img src="img/1471978117758892932.jpg"/></a></li>
				<li><a href="#"><img src="img/1472580438148856915.jpg"/></a></li>
				<li><a href="#"><img src="img/1473114386428986466.jpg"/></a></li>
				<li><a href="#"><img src="img/1473114465342997020.jpg"/></a></li>
				<li><a href="#"><img src="img/1473114528385615908.jpg"/></a></li>
				<li><a href="#"><img src="img/1473212715169408190.jpg"/></a></li>
			</ul>
			<div class="page">
				<span class="active">1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span>
			</div>
		</div>

	</body>
</html>
<script type="text/javascript">
		var spans=document.getElementsByTagName("span");
		for (var i=0;i<spans.length;i++) {
			spans[i].onmousemove=function(){
				var pageNum=parseInt(this.innerHTML);
				document.getElementById("u1").style.marginLeft=(pageNum-1)*(-450)+"px";
				//同时将span的样式修改
				for(var j=0;j<spans.length;j++){
					spans[j].className="";
				}
				this.className="active";
			}
		}
		function lb(){
			var actives=document.getElementsByClassName("active")[0];
			var spans=document.getElementsByTagName("span");
			var pageNumber=parseInt(actives.innerHTML);
			var newSpan;
			var newPage;
			if(pageNumber==7){
				newPage=1;
				newSpan=spans[0];
			}else{
				newPage=pageNumber+1;
				newSpan=actives.nextSibling;
			}	
			document.getElementById("u1").style.marginLeft=(newPage-1)*(-450)+"px";
			actives.className="";
			newSpan.className="active";
		
		}
		 var xx=window.setInterval(lb,1000);
		document.getElementById("u1").onmouseover=function(){
				clearInterval(xx);
		}
		document.getElementById("u1").onmouseout=function(){
			xx=window.setInterval(lb,1000);
		}
			
		
			
		
</script>
